<html>
<head>
<meta charset="utf8"/>
<script type="text/javascript" src="tpl.js"></script>
</head>
<body>
数据在本文件内
<div class="users">
	<script type="tpl" norender>
			<table>
				for(var i=0;i<users.length;i++){
					var user = users[i];
						<tr>
    						<td>@user.name</td>
    						<td>@{.age}year</td>
							<td>@.sex</td>
							<td>@.email\@126.com
						</tr>
				}
			<table>
	</script>
</div>

<p></p>
通过ajax获取数据<br>
<script type="tpl" data='./users.js'>
	!!@tplData.length原样输出<br/>
	!@tplData.length解析输出<br/>
	 <select>
			for(var i=0;i<tplData.length;i++){
					var user = tplData[i];
						<option value="@user.age" age="@.age">
							@.name
						</option>
			}
	 </select>
</script>
 
 
 <script type="tpl">
	!window对象属性
	<ul>
	for(var i in window){
		<li class="@{i}">@i</li>
	}
	</ul>
	for(var i=0;i<10;i++)
		<img src="http://www.w3school.com.cn/i/eg_tulip.jpg?id=@i" width="@{i*30}" style="border:@{i}px solid #fff;"></img>
 </script>
 
<div id="result">

</div>

<script type="text/javascript">
		var beg = new Date().getTime();
    var users=[
        {
            name:'name',
            age:12,
            sex:'boy',
            email:'nimei'
        }, {
            name:'name1',
            age:12,
            sex:'boy',
            email:'nimei'
        }
    ];
		
    tpl.render(); //自动渲染整个网页中的<script type="tpl">模板
    
    var tplText= "<ul>\n"
                +"for(var i=0;i<tplData;i++){\n"
                + "<li>@i</li>\n"
                +"}\n"
                + "<ul>\n";
                
                
	 /*
    var func = tpl.func(tplText); //将模板编译成一个函数，模板里面通过tplData获取参数
    var html = func(12);//调用模板函数，并传递参数12，在模板里面tplData就是12
    document.getElementById('result').innerHTML=html; //将生成的html设置为网页
    */
	
	var html = tpl.html(tplText,12);//直接传递模板，与参数获取html
	document.getElementById('result').innerHTML=html;
  document.write("时间："+ (new Date().getTime()-beg).toString() +"毫秒");
</script>
</body>
</html>